@import "common/var";
@import "common/mixin";
@import "mixins/button-mixins";
@import "mixins/common-mixin";

// 默认button按钮样式设置
@include base(button) {
  display: inline-block;
  cursor: pointer;
  background-color: $color-white;
  border:1px solid $border-color-base;
  color: $color-text-regular;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  font-weight: $button-font-weight;
  line-height: 1;
  white-space: nowrap;
  @include utils-user-select(none);
  &:not(:last-child) {
    margin-right: 10px;
  }
  //& + & {
  //  margin-left: 10px;
  //}

  // 设置默认大小
  @include button-size($button-padding-top-bottom, $button-padding-left-right, $button-font-size, $button-border-radius);

  // 鼠标移入 获取焦点
  &:hover, &:focus {
    color: $color-primary;
    background-color: mix($color-white, $color-primary, 90%);
    border-color: mix($color-white, $color-primary, 70%);
  }

  // 激活
  &:active {
    color: mix($color-black, $color-primary, $button-active-shade-percent);
    border-color: mix($color-black, $color-primary, $button-active-shade-percent);
    outline: none;
  }

  // 兼容火狐浏览器
  &::-moz-focus-inner {
    border: 0;
  }

  // 图标在前
  &.icon-left,&.is-loading {
    direction: ltr;
    > .icon {
      display: inline-block;
      direction: rtl;
    }

    > .content {
      display: inline-block;
      direction: rtl;
      margin-left: 5px;
      margin-right: 0px;
    }
  }
  // 图标在后
  &.icon-right {
    direction: rtl; // 右向左
    > .icon {
      display: inline-block;
      direction: ltr;
    }

    > .content {
      display: inline-block;
      direction: ltr;
      margin-left: 0px;
      margin-right: 5px;
    }
  }

  // 当为plain时
  @include when(plain) {
    // plain 鼠标移入、获取焦点
    &:hover, &:focus {
      color: $color-primary;
      background-color: $color-white;
      border-color: $color-primary;
    }

    // plain 激活
    &:active {
      color: mix($color-black, $color-primary, $button-active-shade-percent);
      background-color: $color-white;
      border-color: mix($color-black, $color-primary, $button-active-shade-percent);
      outline: none;
    }
  }

  // 当为active时
  @include when(active) {
    color: mix($color-black, $color-primary, $button-active-shade-percent);
    border-color: mix($color-black, $color-primary, $button-active-shade-percent);
  }

  // 当为disabled
  @include when(disabled) {
    &, &:hover, &:focus {
      color: $button-disabled-font-color;
      background-color: $button-disabled-background-color;
      border-color: $button-disabled-border-color;
      cursor: not-allowed;
    }

    &.lc-button-text {
      background: transparent;
    }

    &.is-plain {
      &, &:hover, &:focus {
        background-color: $color-white;
        border-color: $button-disabled-border-color;
        color: $button-disabled-font-color;
      }
    }
  }

  @include when(loading) {
    position: relative;
    pointer-events: none;

    &:before {
      pointer-events: none;
      content: '';
      position: absolute;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: inherit;
      background-color: rgba(255,255,255,.35);
    }
  }

  // 当为radius 圆角
  @include when(radius){
    padding:12px 23px;
    border-radius: 20px;
  }

  // 当为radius 圆角
  @include when(circular){
    border-radius: 50%;
    padding: $button-padding-top-bottom;
  }

  // primary
  @include type(primary) {
    @include button-type-style($button-primary-font-color, $button-primary-background-color, $button-primary-border-color)
  }

  // warning
  @include type(warning) {
    @include button-type-style($button-warning-font-color, $button-warning-background-color, $button-warning-border-color)
  }

  // danger
  @include type(danger) {
    @include button-type-style($button-danger-font-color, $button-danger-background-color, $button-danger-border-color)
  }

  // info
  @include type(info) {
    @include button-type-style($button-info-font-color, $button-info-background-color, $button-info-border-color)
  }

  // success
  @include type(success) {
    @include button-type-style($button-success-font-color, $button-success-background-color, $button-success-border-color)
  }

  // large
  @include type(large){
    @include button-size($button-large-padding-top-bottom, $button-large-padding-left-right, $button-large-font-size, $button-large-border-radius)
  }

  //small
  @include type(small){
    @include button-size($button-small-padding-top-bottom, $button-small-padding-left-right, $button-small-font-size, $button-small-border-radius)
  }

  // mini
  @include type(mini){
    @include button-size($button-mini-padding-top-bottom, $button-mini-padding-left-right, $button-mini-font-size, $button-mini-border-radius)
  }

  // text
  @include type(text) {
    border-color: transparent;
    color: $color-primary;
    background: transparent;
    padding-left: 0;
    padding-right: 0;

    &:hover,
    &:focus {
      color: mix($color-white, $color-primary, $button-hover-tint-percent);
      border-color: transparent;
      background-color: transparent;
    }
    &:active {
      color: mix($color-black, $color-primary, $button-active-shade-percent);
      border-color: transparent;
      background-color: transparent;
    }

    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:focus {
      border-color: transparent;
    }
  }
}

@include base(button-group) {
  display: inline-block;
  vertical-align: middle;
  &{
    >.lc-button{
      margin-left:0;
      &:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      &:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
      &:not(:last-child) {
        margin-right: -4px;
      }
      &:not(:first-child):not(:last-child) {
        border-radius: 0;
      }
      &:first-child,&:last-child {
        border-top-right-radius: $button-border-radius;
        border-bottom-right-radius: $button-border-radius;
        border-top-left-radius: $button-border-radius;
        border-bottom-left-radius: $button-border-radius;

        &.is-round {
          border-radius: 20px;
        }

        &.is-circle {
          border-radius: 50%;
        }
      }
    }

    @each $type in (primary, success, warning, danger, info) {
      .lc-button-#{$type} {
        &:first-child {
          border-right-color: rgba($color-white, 0.5);
        }
        &:last-child {
          border-left-color: rgba($color-white, 0.5);
        }
        &:not(:first-child):not(:last-child) {
          border-left-color: rgba($color-white, 0.5);
          border-right-color: rgba($color-white, 0.5);
        }
      }
    }
  }
}
//.lc-button-group {
//  .lc-button {
//    margin: 0px
//  }
//}
